<template>
	<view>
		<view class="image">
			<image src="/static/images/Property.jpg" alt=""></image>
		</view>
		<view class="conent">
			<!-- 	<view class="item">
				<view class="top">
					您想要咨询哪些业务类型吗?
				</view>
				<view class="tn-padding-top-sm tn-padding-bottom-sm">
					<view class="box tn-flex tn-flex-wrap ">
						<view class="check tn-flex tn-flex-col-center" v-for="(item,index) in list" :key="index"
							@click="onType(index)">
							<view class="left" :class="[typeIndex==index?'active':'']"></view>
							<view class="right">{{item.name}}</view>
							<view v-if="typeIndex==4&&index==4" class="input-box">
								<tn-input trim v-model="from.typeName" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="top">
					您的所在单位
				</view>
				<view class="tn-padding-top-sm tn-padding-bottom-sm">
					<view class="box tn-flex tn-flex-wrap ">
						<view class="check tn-flex tn-flex-col-center" v-for="(item,index) in unitList" :key="index"
							@click="onunit(index)">
							<view class="left" :class="[unitIndex==index?'active':'']"></view>
							<view class="right">{{item.name}}</view>

						</view>
					</view>
				</view>
			</view> -->
			<view>
				<tn-form :model="form" ref="form" labelWidth="160" :errorType="['message']">
					
					<!-- 	<tn-form-item label="手机号" prop="name">
						<tn-input v-model="form.name" />
					</tn-form-item>
					<tn-form-item label="邮箱" prop="name">
						<tn-input v-model="form.name" />
					</tn-form-item> -->
					<tn-form-item label="业务类型" prop="name">
						<view class="tn-padding-top-sm tn-padding-bottom-sm">
							<view class="box tn-flex tn-flex-wrap ">
								<view class="check tn-flex tn-flex-col-center tn-flex-wrap" v-for="(item,index) in list" :key="index"
									@click="onType(index)">
									<view class="left" :class="[item.checked==true?'active':'']"></view>
									<view class="right">{{item.name}}</view>
									<view v-if="typeIndex==4&&index==4" class="input-box ">
										<tn-input trim v-model="from.btOtherMsg" />
									</view>
								</view>
							</view>
						</view>
					</tn-form-item>
					<tn-form-item label="所在单位" prop="name">
						<tn-radio-group v-model="form.type">
							<tn-radio @change="radioChange" v-for="(item, index) in unitList" :key="index"
								:name="item.name" :disabled="item.disabled">
								{{item.name}}
							</tn-radio>
						</tn-radio-group>
					</tn-form-item>
					<tn-form-item label="手机号" prop="mobile">
						<tn-input v-model="form.mobile" placeholder="请输入手机号" />
					</tn-form-item>
				</tn-form>
				<view class="tn-margin-top-sm tn-flex tn-flex-row-center">
					<view class="btn" @click="onSubmit()">提交</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		techPolicyConsult
	} from '@/api/technology/index.js'
	export default {
		data() {
			return {
				list: [{
						name: '技术转移',
						disabled: false,
						checked: false,
						key: 'btTechTransfer'
					},
					{
						name: '知识产权',
						disabled: false,
						checked: false,
						key: 'btIntellectualProperty'
					},
					{
						name: '信息分析',
						disabled: false,
						checked: false,
						key: 'btInformAnalysis'
					},
					{
						name: '技术投资',
						disabled: false,
						checked: false,
						key: 'btTechInvest'
					},
					{
						name: '其他',
						disabled: false,
						checked: false,
						key: 'btOther'
					},
				],
				unitList: [{
						name: '个人',
						disabled: false
					},
					{
						name: '企业',
						disabled: false
					},
					{
						name: '高校',
						disabled: false
					},
					{
						name: '政府',
						disabled: false
					},
				],
				form: {
					btOtherMsg: "",
					type: ""
				},
				rules: {
					// 字段名称
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$tn.test.mobile()就是返回true或者false的
								return this.$tn.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]

				},
				typeIndex: "",
				unitIndexName: ""
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			onType(e) {
				this.typeIndex = e
				let flag = this.list[e].checked
				this.list[e].checked = flag ? false : true
			},
			onunit(e) {
				this.unitIndex = e
			},
			// 选中某个复选框时，由checkbox时触发
			radioChange(e) {
				this.unitIndexName = e
			},
			onSubmit() {
				let obj = this.oncheckbox()
				let affiliation = this.unitList.findIndex((r) => r.name == this.unitIndexName)
					++affiliation
				let data = {
					...this.form,
					...obj,
					affiliation
				}
				techPolicyConsult(data).then((res) => {
					if(res.code==0){
						uni.showToast({
							title: '提交成功',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			//处理多选
			oncheckbox() {
				const list = this.list
				const filteredList = list.filter(item => item.checked);
				let obj = {}
				filteredList.forEach((res) => {
					obj[res.key] = 1
				})
				return obj
			}
		}
	}
</script>

<style lang="scss" scoped>
	.image {
		width: 100%;
		height: 450rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.conent {
		padding: 40rpx 50rpx;
	}

	.input-box {
		border: 2rpx solid #000;
		min-width: 400rpx;
	}

	.btn {
		width: 730rpx;
		height: 80rpx;
		font-size: 36rpx;
		background-color: #01BEFF;
		text-align: center;
		line-height: 80rpx;
		border-radius: 20rpx;
		color: #fff;
	}

	.item {
		.top {
			font-size: 36rpx;
		}

		.box {}
	}

	.check {
		margin-top: 10rpx;
		min-width: 48%;

		.left {
			background-color: #fff;
			width: 40rpx;
			height: 40rpx;
			border-radius: 20rpx;
			border: 2rpx solid #000;
			margin-right: 10rpx;
		}

		.active {
			background-color: #01BEFF;
			border: none;
		}
	}
</style>